<template>
	<view class="wrapper">
		<uni-nav-bar title="首页" backgroundColor="#e4393c"/>
		<uni-goods-nav   :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
		<button @click="open">打开弹窗</button>
		<!-- <uni-popup ref="popup" type="bottom" background-color="#fff">底部弹出 Popup</uni-popup> -->
		<uni-popup ref="popup" type="dialog">
		    <!-- <uni-popup-message type="success" message="成功消息" :duration="2000"></uni-popup-message> -->
			<uni-popup-dialog mode="base" content="成功消息" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
			
		</uni-popup>
		
		 <uni-list>
		    <uni-list-item title="列表左侧带略缩图" note="列表描述信息" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
		     thumb-size="lg" rightText="右侧文字"></uni-list-item>
		    <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" title="列表左侧带扩展图标" ></uni-list-item>
		</uni-list>
		
		
		<uni-card 
		    title="Dcloud" 
		    mode="title" 
		    :is-shadow="true" 
		    thumbnail="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" 
		    extra="技术没有上限" 
		    note="Tips"
		>
		    uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可编译到iOS、Android、H5、以及各种小程序等多个平台。即使不跨端，uni-app同时也是更好的小程序开发框架。
		</uni-card>
	</view>
</template>

<script>
	import Vue from 'vue'
	export default {
	    data () {
	      return {
	        options: [{
	            icon: 'headphones',
	            text: '客服'
	        }, {
	            icon: 'shop',
	            text: '店铺',
	            info: 2,
	            infoBackgroundColor:'#007aff',
	            infoColor:"red"
	        }, {
	            icon: 'cart',
	            text: '购物车',
	            info: 2
	        }],
	        buttonGroup: [{
	          text: '加入购物车',
	          backgroundColor: '#ff0000',
	          color: '#fff'
	        },
	        {
	          text: '立即购买',
	          backgroundColor: '#ffa200',
	          color: '#fff'
	        }
	        ]
	      }
	    },
	    methods: {
	      onClick (e) {
	        uni.showToast({
	          title: `点击${e.content.text}`,
	          icon: 'none'
	        })
	      },
	      buttonClick (e) {
	        console.log(e)
	        this.options[2].info++
	      },
		  open(){
			  // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
			  this.$refs.popup.open()
			}
	    }
	}
</script>
<style scoped lang="scss">
	
</style>